<template>
  <div>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="字典类型">
        <el-select v-model="form" placeholder="字典类型">
          <el-option v-for="t in type" :label="t.dictName" :value="t.dictType" :key="t.dictType"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字典标签">
        <el-input v-model="formInline.dictLabel" placeholder="字典标签"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="primary" @click="cz">重置</el-button>
      </el-form-item>
    </el-form>

    <el-button type="success" @click="add">新增</el-button>
    <el-button type="primary" @click="gb">关闭</el-button>
    <el-button type="primary" @click="dc">导出</el-button>
    <el-upload
        class="upload-demo"
        action="http://localhost:8000/carservice/carDictData/upload"
        multiple
        :limit="3">
      <el-button size="small" type="primary">导入</el-button>
    </el-upload>
    <el-table
        ref="multipleTable"
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          fixed
          prop="dictCode"
          label="字典编码"
          width="150">
      </el-table-column>
      <el-table-column
          prop="dictLabel"
          label="字典标签"
          width="120">
      </el-table-column>
      <el-table-column
          prop="dictValue"
          label="字典键值"
          width="120">
      </el-table-column>
      <el-table-column
          prop="dictSort"
          label="字典排序"
          width="120">
      </el-table-column>
      <el-table-column
          label="状态"
          width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">正常</span>
          <span v-if="scope.row.status==1">停用</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="120">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="200">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button @click="xg(scope.row)" type="info">修改</el-button>
          <el-button  @click="del(scope.row.dictCode)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :model="forms">
        <el-form-item label="字典类型" :label-width="formLabelWidth">
          <el-input v-model="forms.dictType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典标签" :label-width="formLabelWidth">
          <el-input v-model="forms.dictLabel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据键值" :label-width="formLabelWidth">
          <el-input v-model="forms.dictValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="样式属性" :label-width="formLabelWidth">
          <el-input v-model="forms.cssClass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示排序" :label-width="formLabelWidth">
          <el-input-number v-model="forms.dictSort" @change="handleChange" :min="0" :max="1000" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="回显样式" :label-width="formLabelWidth">
          <el-select v-model="forms.listCalss" placeholder="回显样式">
            <el-option label="默认(default)" value="default"></el-option>
            <el-option label="主要(primary)" value="primary"></el-option>
            <el-option label="成功(success)" value="success"></el-option>
            <el-option label="信息(info)" value="info"></el-option>
            <el-option label="警告(warning)" value="warning"></el-option>
            <el-option label="危险(danger)" value="danger"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="forms.status" placeholder="状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="tianjian">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="dialogFormVisibles">
      <el-form :model="formes">
        <el-form-item label="字典类型" :label-width="formLabelWidth">
          <el-input v-model="formes.dictType" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="字典标签" :label-width="formLabelWidth">
          <el-input v-model="formes.dictLabel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据键值" :label-width="formLabelWidth">
          <el-input v-model="formes.dictValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="样式属性" :label-width="formLabelWidth">
          <el-input v-model="formes.cssClass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示排序" :label-width="formLabelWidth">
          <el-input-number v-model="formes.dictSort" @change="handleChange" :min="0" :max="1000" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="回显样式" :label-width="formLabelWidth">
          <el-select v-model="formes.listCalss" placeholder="回显样式">
            <el-option label="默认(default)" value="default"></el-option>
            <el-option label="主要(primary)" value="primary"></el-option>
            <el-option label="成功(success)" value="success"></el-option>
            <el-option label="信息(info)" value="info"></el-option>
            <el-option label="警告(warning)" value="warning"></el-option>
            <el-option label="危险(danger)" value="danger"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="formes.status" placeholder="状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="formes.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="xiugai">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cardataService from "@/api/cardataService";
export default {
  name: "CarDictDataView",
  data() {
    return {
      tableData:[],
      formInline:{},
      type:[],
      form:this.$route.query.dictType,
      dialogFormVisible:false,
      forms:{},
      formLabelWidth:'120px',
      dialogFormVisibles:false,
      formes:{},
    }
  },
  methods: {
    list(){
      this.formInline.dictType=this.form
      cardataService.list(this.formInline).then((r)=>{
        this.tableData=r.data.data;
      })
    },
    typeList(){
      cardataService.type().then((r)=>{
        this.type=r.data.data;
      })
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    cz(){
      this.formInline={};
      this.list();
    },
    xg(row){
      this.dialogFormVisibles=true;
      this.formes=row;
    },
    del(dictCode){
      cardataService.deletes(dictCode).then(()=>{
        this.$message.success("删除成功");
        this.list();
      })
    },
    add(){
      this.dialogFormVisible=true;
    },
    gb(){
      this.$router.push("cardicttype")
    },
    handleChange(value) {
      console.log(value);
    },
    tianjian(){
      cardataService.add(this.forms).then(()=>{
        this.$message.success("添加成功");
        this.dialogFormVisible=false;
        this.list();
      })
    },
    xiugai(){
      cardataService.updata(this.formes).then(()=>{
        this.$message.success("修改成功");
        this.dialogFormVisibles=false;
        this.list();
      })
    },
    dc(){
      window.location.href="http://localhost:9033/carDictData/download"
    }
  },
  created() {
    this.list();
    this.typeList();
  }
}
</script>

<style scoped>

</style>
